<template>
  <el-card class="box-card">
    <div slot="header">
      <!-- 表单搜索操作栏 -->
      <el-form
        :inline="true"
        :model="search"
        class="demo-form-inline"
        size="small"
      >
        <el-form-item>
          <el-button type="success" @click="add">添加店铺</el-button>
        </el-form-item>
        <!-- <el-form-item>
          <el-button type="danger" @click="batchDel">批量删除</el-button>
        </el-form-item> -->

        <el-form-item>
          <el-input v-model="search.name" placeholder="关键字"></el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="getTableData">查询</el-button>
        </el-form-item>
      </el-form>
    </div>

    <!-- 表格数据 -->
    <el-table
      ref="multipleTable"
      :data="tableData"
      v-loading="loading"
      tooltip-effect="dark"
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55"> </el-table-column>

      <el-table-column prop="ID" label="编号" width="55"> </el-table-column>

      <el-table-column prop="shopName" label="店铺名称" width="120px">
        <template #default="{ row }">
          <div v-html="highlight(row.shopName)"></div>
        </template>
      </el-table-column>

      <el-table-column
        prop="shopAddress"
        label="店铺地址"
        show-overflow-tooltip
      >
        <template #default="{ row }">
          <div v-html="highlight(row.shopAddress)"></div>
        </template>
      </el-table-column>

      <el-table-column prop="phone" label="联系电话">
        <template #default="{ row }">
          <div>{{ row.phone }}</div>
        </template>
      </el-table-column>

      <el-table-column prop="yingyeTime" label="营业时间"> </el-table-column>

      <el-table-column prop="jingyingfw" label="经营范围"> </el-table-column>

      <el-table-column prop="fuzer" label="负责人"> </el-table-column>

      <el-table-column prop="dianpumj" label="店铺面积">
        <template #default="{ row }">
          <div>{{ row.dianpumj }}</div>
        </template>
      </el-table-column>

      <el-table-column prop="shopDate" label="开店日期">
        <template #default="{ row }">
          <div>{{ row.shopDate }}</div>
        </template>
      </el-table-column>

      <el-table-column prop="email" label="邮箱"> </el-table-column>

      <el-table-column prop="region" label="区域"> </el-table-column>

      <el-table-column prop="liansuo" label="状态">
        <template #default="{ row }">
          <el-switch
            v-model="row.liansuo"
            :active-value="true"
            :inactive-value="false"
             :disabled="true"
          >
          </el-switch>
        </template>
      </el-table-column>

      <el-table-column prop="wangAddress" label="网址"> </el-table-column>

      <el-table-column prop="kefuPhone" label="客服电话"> </el-table-column>

      <el-table-column label="操作" width="220">
        <template #default="{ row }">
          <!-- 状态气泡提示 -->
          <el-popconfirm
            confirm-button-text="确定"
            cancel-button-text="取消"
            icon="el-icon-info"
            icon-color="red"
            :title="'确定修改【' + row.shopName + '】的信息吗？'"
            @confirm="del(row.addressID)"
            @cancel="() => ElMessage('已取消修改')"
          >
            <template #reference>

      <el-button :type="row.liansuo? 'danger':'primary'" size="small">{{row.liansuo? '休息':'营业'}}</el-button>
  
            </template>
          </el-popconfirm>
          &nbsp;
          <el-button type="warning" size="small" @click="edit(row)"
            >修改</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <br />
    <!-- 分页 -->
    <el-pagination
      v-model:current-page="pageIndex"
      v-model:page-size="pageSize"
      :hide-on-single-page="autoHide"
      :page-sizes="[5, 10, 20, 50, 100]"
      layout="total, sizes, prev, pager, next, jumper"
      :total="totalNum"
      background
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    >
    </el-pagination>
  </el-card>

  <!-- 添加的弹窗 -->
  <el-dialog
    title="添加店铺"
    append-to-body
    width="1000px"
    top="5vh"
    v-model="createDialogFormVisible"
  >
    <Create v-model="createDialogFormVisible" @refresh="getTableData"></Create>
  </el-dialog>

  <!-- 修改的弹窗 -->
  <el-dialog
    title="修改店铺"
    append-to-body
    width="1000px"
    top="5vh"
    v-model="editDialogFormVisible"
  >
    <Edit
      v-model="editDialogFormVisible"
      :editData="editData"
      @refresh="getTableData"
    ></Edit>
  </el-dialog>
</template>

<script setup lang="ts">
 const statestirng=ref("关闭");
import { onMounted, ref, reactive, markRaw } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { Delete } from "@element-plus/icons-vue";
import http from "../../api/http";
import { imgBaseURL } from "../../api/baseURL";
import {IShop} from '@/types/HJQDto/stoinfo'
// 导入组件
import Create from "../Address/create.vue";
import Edit from "../Address/edit.vue";

// 定义店铺数据类型接口


// 列表分页查询相关
const tableData = reactive<IShop[]>([]);
const loading = ref(false);
const pageIndex = ref(1); // 当前页码
const pageSize = ref(5); // 每页条数
const totalNum = ref(0); // 总数量
const autoHide = ref(false); // 当只有一页数据时是否隐藏分页s
const search = reactive({
  name: "",
});

// 查询数据
const getTableData = () => {
  loading.value = true;
  http
    .getList<IShop>("HJQ_store_info", {
      page: pageIndex.value,
      limit: pageSize.value,
      name: search.name,
    })
    .then((response) => {
      tableData.length = 0;
      tableData.push(...response.data);
      totalNum.value = response.count;
    })
    .catch((err) => {
      console.error("获取数据失败:", err);
    })
    .finally(() => {
      setTimeout(() => {
        loading.value = false;
      }, 200);
    });
};

// 分页事件
const handleCurrentChange = (val: number) => {
  pageIndex.value = val;
  getTableData();
};

// 切换每页数量
const handleSizeChange = (val: number) => {
  pageSize.value = val;
  getTableData();
};

// 添加店铺
const createDialogFormVisible = ref(false);
const add = () => {
  createDialogFormVisible.value = true;
};

// 修改店铺
const editDialogFormVisible = ref(false);
const editData = ref<IShop>({} as IShop);
const edit = (row: IShop) => {
  editData.value = JSON.parse(JSON.stringify(row));
  editDialogFormVisible.value = true;
};

// 单个删除
const del = (id: number) => {
  http
    .delete("HJQ_store_info", { addressID:id },
    )
    .then((res) => {
      if (res.code === "200") {
        ElMessage({
          message: res.msg,
          type: "success",
          showClose: true,
          duration: 3000,
        });
        getTableData();
      } else {
        ElMessage({
          message: "修改错误",
          type: "error",
          showClose: true,
          duration: 3000,
        });
      }
    })
    .catch((err) => {
      console.error("删失败:", err);
      ElMessage.error("删除失败，请重试");
    });
};

// 批量删除
const multipleSelection = ref<IShop[]>([]);
const handleSelectionChange = (val: IShop[]) => {
  multipleSelection.value = val;
};

const batchDel = () => {
  if (multipleSelection.value.length > 0) {
    let ids: number[] = [];
    let names = "";
    multipleSelection.value.forEach((v) => {
      ids.push(v.AddressID);
      names += v.shopName + ",";
    });
    names = names.substring(0, names.length - 1);

    ElMessageBox.confirm(`确定删除【${names}】`, "删除确认", {
      type: "warning",
      icon: markRaw(Delete),
    })
      .then(() => {
        http
          .delete("HJQ_store_info/batch", {
            data: ids,
          })
          .then((res) => {
            if (res.code === "200") {
              ElMessage({
                message: res.msg,
                type: "success",
                showClose: true,
                duration: 3000,
              });
              getTableData();
            } else {
              ElMessage({
                message: res.msg,
                type: "error",
                showClose: true,
                duration: 3000,
              });
            }
          })
          .catch((err) => {
            console.error("批量删除失败:", err);
            ElMessage.error("批量删除失败，请重试");
          });
      })
      .catch(() => {
        // 取消删除
      });
  } else {
    ElMessage("请选择需要删除的数据！");
  }
};

// 文字搜索高亮效果
const highlight = (v: string) => {
  if (!search.name) return v;
  return v.replace(
    new RegExp(search.name, "g"),
    `<span class="highlight">${search.name}</span>`
  );
};

// 组件挂载时初始化
onMounted(() => {
  getTableData();
});
</script>

<style>
.highlight {
  font-weight: 600;
  font-size: 16px;
  color: #ffffff;
  animation: glow 666ms infinite alternate;
}

@keyframes glow {
  from {
    text-shadow: 0 0 10px #1877f2, 0 0 20px #1459b3, 0 0 30px #179bff;
  }

  to {
    text-shadow: 0 0 5px #1877f2, 0 0 10px #1459b3, 0 0 15px #179bff;
  }
}

.demo-form-inline .el-form-item {
  margin-bottom: 0px;
}
</style>
